<template>
  <div class="age-range-select">
    <el-input-number
    placeholder="请输入"
      v-model="money1"
      :min="0"
      :max="money1Max"
      :controls="false"
    />
    <span class="split">-</span>
    <el-input-number placeholder="请输入" v-model="money2" :min="money2Min" :controls="false" />
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
const emit = defineEmits(['update:begin', 'update:end'])
const props = defineProps({
  begin: {
    type: [Number, String]
  },
  end: {
    type: [Number, String]
  }
  // min: {
  //   type: Number,
  //   default: 60
  // },
  // max: {
  //   type: Number,
  //   default: 120
  // }
})

const money1 = computed({
  get(val) {
    return props.begin? props.begin : undefined
  },
  set(val) {
    if (val) {
      emit('update:begin', val)
    }
  }
})
const money2 = computed({
  get(val) {
    return props.end ? props.end : undefined
  },
  set(val) {
    if (val) {
      emit('update:end', val)
    }
  }
})
const money1Max = computed(() => {
  return money2.value ? money2.value : 10000000000
})
const money2Min = computed(() => {
  return money1.value ? money1.value : 0
})
</script>
<style lang="scss" scoped>
.age-range-select {
  display: flex;
  align-items: center;
  width: 200px;
  .split {
    width: 8px;
    margin: 0 10px;
    font-size: 12px;
    color: #777;
  }
}
</style>
